<template>


   <div class="page-box">
      <div class="page-title">
         {{ '库存盘点' }}
      </div>

      <div class="page-search">
         <div class="search-box" :style="{ height: IsHeight }">
            <el-input v-model="pageData.keywords" @input="getAlltabeData" placeholder="盘点单号/盘点名称"
               style="width: 200px; margin-right: 10px; margin-bottom: 10px;" />
         </div>

         <div class="search-btn">
            <div class="btn_item" @click="handleClickHeight">
               <img class="btn_img" src="@/assets/sx.png" alt=""> <span> 高级筛选 </span>
            </div>
            <div class="btn_item">
               <img class="btn_img" src="@/assets/dc.png" alt=""> <span> 导出 </span>
            </div>

         </div>

      </div>
      <div class="search-btn-right">
         <el-button color="#626aef" type="primary" @click="handleClickAdd('main')"> 新增盘点 </el-button>
      </div>
   </div>

   <div class="table-box">

      <el-table height="calc(100vh - 279px)" :data="tabeData" style="width: 100%" v-loading="loading" border>
         <el-table-column align="center" prop="check_no" label="盘点单号" width="200">
            <template #default="scope">
               <div style="color: blue; cursor: pointer;" @click="handleClickDetails(scope.row)">
                  {{ scope.row.check_no }}
               </div>
            </template>
         </el-table-column>
         <el-table-column align="center" prop="name" label="盘点名称" width="120" />
         <el-table-column align="center" prop="check_date" label="盘点日期" width="180" />
         <el-table-column align="center" prop="warehouse_name" label="盘点仓库" width="120" />
         <!-- <el-table-column align="center" prop="status_text" label="状态" width="120">
            <template #default="scope">
               <div>
                  <el-tag type="primary" v-if="scope.row.status == 0">待提交</el-tag>
                  <el-tag type="warning" v-else-if="scope.row.status == 1">审核中</el-tag>
                  <el-tag type="success" v-else-if="scope.row.status == 2">审核完成</el-tag>
                  <el-tag type="danger" v-else-if="scope.row.status == 3">审核拒绝</el-tag>
               </div>
            </template>
         </el-table-column> -->
         <el-table-column align="center" prop="manager_name" label="盘点负责人" width="120" />
         <el-table-column align="center" prop="note" label="备注" min-width="200">
            <template #default="scope">
               <div>{{ scope.row.note || '--' }}</div>
            </template>
         </el-table-column>

         <el-table-column align="center" prop="creator_name" label="创建人" width="100" />
         <el-table-column align="center" prop="created_at" label="创建时间" width="180" />
         <el-table-column fixed="right" label="操作" width="230" align="center">
            <template #default="scope">
               <div class="btn-box">
                  <el-button plain size="small" type="primary" @click="handleClickEdit(scope.row)">编辑</el-button>
                  <el-button :disabled="scope.row.status != 0" plain size="small" type="warning" @click="handleClickSubmit(scope.row)">提交盘点</el-button>

               </div>
            </template>
         </el-table-column>
      </el-table>
   </div>

   <!-- 分页 -->
   <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
      :page-size="pageData.page_size" :total="total" />

   <InventoryCountDialog v-model:dialogVisible="isShow" :dialogType="dialogType" :dialogRow="dialogRow"
      @submit="handleSubmit" />
   <InventoryCountDetails v-model:dialogVisible="DetailsVisible" :dialogRow="dialogRow" @submit="handleSubmit" />
</template>

<script setup lang="ts">

import { ref, onMounted, watch } from "vue";
import Pagination from "@/components/Pagination.vue";
import { ElMessageBox, ElMessage } from 'element-plus';
import api from "@/api";
import InventoryCountDetails from "./components/InventoryCount/InventoryCountDetails.vue";
import InventoryCountDialog from "./components/InventoryCount/InventoryCountDialog.vue";

// 定义库存盘点数据类型
interface InventoryCount {
   id: string | number;
   check_no: string;
   name: string;
   check_date: string;
   warehouse_id: number | string;
   warehouse_name: string;
   manager_member_id: number | string;
   manager_name: string;
   status: number;
   status_text: string;
   note: string;
   submit_member_id: string;
   submit_name: string;
   submit_time: string;
   audit_admin_id: string;
   audit_name: string;
   audit_time: string;
   audit_opinion: string;
   creator_admin_id: number | string;
   creator_name: string;
   created_at: string;
   updated_at: string;
   rowNumber?: number;
}

const DetailsVisible = ref<boolean>(false);

let IsHeight = ref<number | string>(0);
const isShow = ref<boolean>(false);
let dialogType = ref<string>('');
let dialogRow = ref<InventoryCount>({} as InventoryCount);
const pageData = ref({
   page_size: 10,
   page: 1,
   keywords: "",
});
const total = ref(0);
const tabeData = ref<InventoryCount[]>([]);

// 侦听动态分页
watch(
   () => {
      return pageData.value;
   },
   () => {
      getAlltabeData();
   },
   { deep: true }
);

let nub = ref<number>(0);
const handleClickHeight = () => {
   nub.value++;
   if (nub.value % 2 == 1) {
      IsHeight.value = '40px';
   } else {
      IsHeight.value = '0px';
   }
}

const pageSize = (e: number) => {
   pageData.value.page_size = e
}
const getPage = (e: number) => {
   pageData.value.page = e
}
onMounted(() => {
   getAlltabeData();
})

// 获取库存盘点列表
const getAlltabeData = async () => {
   loading.value = true;
   try {
      const res = await api.product.stock_check_list({
         ...pageData.value,
      });

      if (res.code === 200) {
         console.log(res.data);
         tabeData.value = res.data.data;
         total.value = res.data.pager.total_records;
      }

   } catch (error) {
      console.error('获取库存盘点列表失败', error);
   } finally {
      loading.value = false;
   }
};

const loading = ref(false);

// 添加库存盘点
const handleClickAdd = (type: 'main', parentRow: InventoryCount | null = null) => {
   dialogType.value = 'add';
   dialogRow.value = {} as InventoryCount;
   isShow.value = true;
}

// 编辑库存盘点
const handleClickEdit = (row: InventoryCount) => {
   dialogType.value = 'edit';
   dialogRow.value = { ...row } as InventoryCount;
   isShow.value = true;
}



// 提交表单回调
const handleSubmit = () => {
   getAlltabeData();
}

// 详情
const handleClickDetails = async (row: InventoryCount) => {
   try {
      const res = await api.product.stock_check_detail({
         id: row.id
      });
      if (res.code === 200) {
         dialogRow.value = res.data;
         DetailsVisible.value = true;
      }
   } catch (error) {
      console.error('获取盘点详情失败', error);
   }
}

// 提交审核
const handleClickSubmit = (row: InventoryCount) => {
   ElMessageBox.confirm(
      `确定要提交审核吗？`,
      '提示',
      {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
      }
   ).then(async () => {
      try {
         // 这里调用提交审核API
         const res = await api.product.stock_check_change_status({
            ids: JSON.stringify([row.id]),
            status: 1
         });
         if (res.code === 200) {
            ElMessage.success('提交审核成功');
            getAlltabeData();
         } else {
            ElMessage.error(res.msg || '提交审核失败');
         }
      } catch (error) {
         console.error('提交审核失败', error);
  
      }
   })
}

</script>

<style lang="scss" scoped>
.btn-box {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 5px;
}

.main-warehouse {
   font-weight: bold;
   color: #333;
}

// 输入框样式
:deep(.el-input__wrapper) {
   background-color: rgba(250, 252, 251, 1);
}

//表格样式
:deep(.el-table) {
   --el-table-header-bg-color: rgba(235, 236, 240, 1);
}

:deep(.el-table thead) {
   color: #444;
}

// 子仓库行样式
:deep(.sub-warehouse-row) {
   background-color: #fef6e5;
}

//分页样式
.pagination {
   width: calc(100% - 42px);
   position: fixed;
   bottom: 20px;
   right: 20px;
   padding-top: 10px;
   border-top: 1px solid #98989848;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
   background-color: #000 !important;
}
</style>